﻿@{
    Layout = null;
}
@Scripts.Render("~/Scripts/HeaderBar")
<header class="header-bar" id="header-bar">
    <section class="flex-container header-bar-container">
        <a class="header-bar__logo" href="/">
            <img src="~/Content/Images/header-bar-logo.png" />
        </a>
        <section class="flex-container header-bar__nav-container">
            <section class="header-bar__left-nav flex-container">
                <nav class="header-bar__nav flex-container">
                    <a class="header-bar__nav-href flex-container" href="/" target="_self">企划</a>
                </nav>
            </section>
            <section v-show="!isLogin" class="flex-container" style="display:none;">
                <nav class="header-bar__nav flex-container">
                    <a class="header-bar__nav-href flex-container" href="@Url.Action("Index","Login")" target="_self">登录</a>
                    <button id="registerBtn" type="button" class="el-button el-button--medium el-button--primary header-bar__nav-button">
                        <span>注册</span>
                    </button>
                </nav>
            </section>
            <section v-show="isLogin" class="flex-container" style="display:none;justify-content: flex-start; align-items: stretch; align-self: auto;">
                <section class="header-bar__user">
                    <div class="avatar-wrapper is-round" v-on:click.stop="avatarOnClick">
                        <section class="avatar-wrapper__img-wrapper">
                            <img src="https://image-assets.mihuashi.com/default_avatar/employer5.jpg!avatar.normal" class="avatar-wrapper__avatar border" style="width: 40px; height: 40px; border-color: rgb(236, 236, 236);">
                        </section>
                    </div>

                    <transition 
                        v-on:enter="animation.enter"
                        v-on:leave="animation.leave"
                        class="collapse"
                    >
                        <section ref="userPanel" v-if="showUserPanel" class="user-panel header-bar__dropdown-wrapper">
                            <section class="flex-container" style="justify-content: center; align-items: stretch; align-self: auto;">
                                <a>
                                    <div class="avatar-wrapper is-round" style="flex: 0 0 90px; width: 90px; height: 90px; margin-right: 0px; padding-bottom: 0px;">
                                        <section class="avatar-wrapper__img-wrapper">
                                            <img src="https://image-assets.mihuashi.com/default_avatar/employer5.jpg!avatar.normal" class="avatar-wrapper__avatar border" style="width: 90px; height: 90px; border-color: rgb(236, 236, 236);">
                                        </section>
                                    </div>
                                </a>
                            </section>
                            <div class="user-panel__user-name">
                                <a> LeeYuze </a>
                            </div>
                            <div class="user-panel__funds-wrapper">
                                <p class="user-panel__deposit">
                                    ￥ 0
                                </p>
                                <section class="user-panel__funds-actions">
                                    <a class="user-panel__link">充值</a>
                                    <a class="user-panel__link">提现</a>
                                    <a class="user-panel__link">交易记录</a>
                                </section>
                            </div>
                            <section class="flex-container is-vertical" style="justify-content: flex-start; align-items: stretch; align-self: auto; margin-top: 10px;">
                                <a class="button-link user-panel__button">
                                    <i class="icon-my-project"></i>
                                    我的企划
                                </a>
                                <a class="button-link user-panel__button">
                                    <i class="icon-config"></i>
                                    账户设置
                                </a>
                                <a class="button-link user-panel__button" v-on:click="logout">
                                    <i class="icon-power-off"></i>
                                    退出登录
                                </a>
                            </section>
                        </section>
                    </transition>

                </section>
                <a style="display:flex;">
                    <el-button class="header-bar__nav-button" size="medium" type="primary">发布需求</el-button>
                </a>
            </section>
        </section>
    </section>
</header>

<script>
    document.querySelector('#registerBtn').addEventListener('click', () => {
        window.location.href = " @Url.Action("Index", "Register") ";
    })
</script>